<!DOCTYPE html>
[#assign ctx=springMacroRequestContext.contextPath/]
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="${ctx!}/statics/layui/css/layui.css" media="all">
  <script type="text/javascript" src="${ctx}/statics/layui/layui.js"></script>
  <script src="${ctx}/statics/js/jquery-3.6.0.js"></script>
</head>
<body>

<div class="layui-layout layui-layout-admin">
  [#include "/common/headNav.html"]
  [#include "/common/sideNav.html"]

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <!-- 搜索栏form表单 -->

    <form class="layui-form" style="text-align: center;margin-top: 50px" autocomplete=“off”>
      <div class="layui-form-item" style="margin-top:10px;margin-left: 10px">
        <div class="layui-inline">
          <label class="layui-form-label">用户名:</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" readonly="true" name="userName" value="${user.username}" style="background:#CCCCCC">
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="margin-top:10px;margin-left: 10px">
        <div class="layui-inline">
          <label class="layui-form-label" style="border: #0C0C0C;background-color: #4E5465;color: #FFFFFF;text-align: center">重置密码</label>
        </div>
      </div>
      <div class="layui-form-item" style="margin-top:10px;margin-left: 10px">
        <div class="layui-inline">
          <label class="layui-form-label"  style="width: 100px">请输入旧密码:</label>
          <div class="layui-input-inline">
            <input type="password"  class="layui-input" id="oldPassword" name="oldPassword">
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="margin-top:10px;margin-left: 10px">
        <div class="layui-inline">
          <label class="layui-form-label" style="width: 100px">请输入新密码:</label>
          <div class="layui-input-inline">
            <input type="password" class="layui-input" lay-verify="newPassword" id="newPassword1" name="newPassword" >
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="margin-top:10px;margin-left: 10px">
        <div class="layui-inline">
          <label class="layui-form-label" style="width: 100px">请输入新密码:</label>
          <div class="layui-input-inline">
            <input type="password" class="layui-input" lay-verify="newPassword" id="newPassword2" name="newPassword" >
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="margin-top:10px;margin-right: 10px">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn" lay-submit lay-filter="form1">保存</button>
        </div>
      </div>
    </form>

  </div>

  </div>
</div>



<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>


<script>

  layui.use('form',function () {
    var form = layui.form;
    form.verify({
      newPassword: function (value) {
        if (value == null || value == "")
          return "密码不能为空!";
        else if(value.length<6){
          return "密码至少为6位!";
        }
        else if($('#oldPassword')[0].value == value){
          return "新旧密码不能相同!";
        }
        else if(!$('#newPassword1')[0].value == ($('#newPassword2')[0].value)){
          return "两次输入的新密码不一致!";
        }
      }
    })

    //监听提交
    form.on('submit(form1)',function (data){
      $.post("/changePassword",
        {
          oldPassword: data.field.oldPassword,
          newPassword: data.field.newPassword,
        }, res=>{
          switch (res.code) {
            case 200:
              layer.msg(res.msg, {icon:1});
              break;
            case 500:
              layer.msg(res.msg, {icon:2});
              break;
          }
        });
      return false;
    })
  })

  layui.use('table', function(){
    var table = layui.table;

    table.render({
      elem: '#table'
      ,url:'/product/list'
      ,page: true
      ,limit :15
      ,limits :[15,30,60]
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,parseData:function (res){
        return{
          "code":res.code,
          "msg":res.msg,
          "count":res.count,
          "data":res.data
        };
      }
      ,cols: [[
        {field:'code', width:'15%', title: '产品编号'}
        ,{field:'abbreviation',  width:'15%', title: '产品简称'}
        ,{field:'name',  width:'20%', title: '产品名字'}
        ,{field:'type',  width:'15%', title: '产品类型'}
        ,{field:'fullName', width:'25%', title: '产品全称'}
        ,{field: 'operate', width:'15%',title: '操作',toolbar: '#barDemo'}
      ]]
    });


    //监听行工具事件
    table.on('tool(table)', function(obj){
      var data = obj.data;
      //console.log(obj)
      if(obj.event === 'edit'){
        var code = data.code;
        var tempwindow = window.open('_blank');
        tempwindow.location = "${ctx}/productDetail/index?code="+code;
      }
    });
  });





  function logout(){
    var layer = layui.layer;
    layer.confirm('是否要注销账户?',{icon:3},function () {
      $.post("/logout",res=>{
        console.log("logout success");
        location.href = '/login';
      });
    })

  }
</script>

</body>
</html>